<template>
  <el-table
    :row-key="tableType?.[0].prop"
    :data="tableData"
    @selection-change="onSelectionChange"
    v-bind="$attrs"
  >
    <slot name="expand"></slot>
    <!-- <el-table-column type="selection" width="55" /> -->
    <template v-for="item in tableType">
      <el-table-column
        :label="item.label"
        :width="item.width"
        show-overflow-tooltip
        align="left"
      >
        <template
          #default="scope"
          v-if="
            item.showType !== 'sex' &&
            item.showType !== 'img' &&
            item.showType !== 'text' &&
            item.showType !== 'select' &&
            item.showType !== 'icon' &&
            item.showType !== 'link' &&
            item.showType !== 'time'
          "
        >
          <span>{{ scope.row[item.prop] }}</span>
        </template>
        <!--   性别   -->
        <template #default="scope" v-if="item.showType === 'sex'">
          <el-tag :type="scope.row[item.prop] === '1' ? 'primary' : 'danger'">
            {{ scope.row[item.prop] === "1" ? "男" : "女" }}
          </el-tag>
        </template>
        <!--   头像   -->
        <template #default="scope" v-if="item.showType === 'img'">
          <el-popover
            effect="light"
            trigger="hover"
            placement="top"
            width="auto"
          >
            <template #default>
              <div>{{ scope.row[item.prop] }}</div>
            </template>
            <template #reference>
              <img
                :class="item.showType"
                :src="scope.row[item.prop]"
                :alt="scope.row[item.prop]"
              />
            </template>
          </el-popover>
        </template>
        <!--   备注   -->
        <template #default="scope" v-if="item.showType === 'text'">
          <el-popover
            effect="light"
            trigger="hover"
            placement="top"
            width="auto"
          >
            <template #default>
              <div>{{ scope.row[item.prop] }}</div>
            </template>
            <template #reference>
              <span class="text-overflow"> {{ scope.row[item.prop] }} </span>
            </template>
          </el-popover>
        </template>
        <!--   状态   -->
        <template #default="scope" v-if="item.showType === 'select'">
          <el-tag :type="scope.row[item.prop] === 1 ? 'primary' : 'danger'">
            {{ scope.row[item.prop] === 1 ? "正常" : "禁用" }}
          </el-tag>
        </template>
        <!--   角色  1：管理员；2：组长；3：组员 -->
        <template #default="scope" v-if="item.showType === 'role_select'">
          <el-tag
            :type="
              scope.row.role === 1
                ? 'danger'
                : scope.row.role === 2
                ? 'warning'
                : 'primary'
            "
          >
            {{
              scope.row.role === 1
                ? "管理员"
                : scope.row.role === 2
                ? "组长"
                : "组员"
            }}
          </el-tag>
        </template>
        <!--   图标   -->
        <template #default="scope" v-if="item.showType === 'icon'">
          <component :is="scope.row[item.prop]"></component>
        </template>
        <!--   链接   -->
        <template #default="scope" v-if="item.showType === 'link'">
          <el-button
            type="primary"
            link
            @click.prevent="downloadByURL(scope.row[item.prop], '')"
            >{{ scope.row["fileName"] }}</el-button
          >
        </template>
        <!--   时间   -->
        <template #default="scope" v-if="item.showType === 'time'">
          {{ datetimeFormat(scope.row[item.prop]) }}
        </template>
      </el-table-column>
    </template>
    <slot name="operation"></slot>
    <slot></slot>
  </el-table>
  <div
    v-if="showPagination"
    style="display: flex; justify-content: flex-end; margin-top: 20px"
  >
    <el-pagination
      layout="total, prev, pager, next"
      :total="currentTotal"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { defineModel, ref, onMounted } from "vue";
import { downloadByURL, datetimeFormat } from "@/utils/index";

interface Props {
  tableType?: Array<any>;
  tableData?: Array<any>;
  onSelectionChange?: Function;
  showDetail?: Function;
  showEditor?: Function;
  onDelete?: Function;
  handleCurrentChange?: Function;
  showPagination?: Boolean;
}

const currentPage = defineModel("page");
const currentTotal = defineModel("total");
const pageSize = defineModel("pageSize");

defineProps<Props>();
</script>

<style scoped></style>
